
.timeline {
  background-color: $my-body-bg;
  min-height: 30rem;

  .panel {
    .title {
      margin-bottom: 1.5rem;
    }

    .no-content {
      text-align: left;
      color: #999;
      margin-bottom: 0;
    }
  }

  .event-no-content  {
    text-align: center;
    margin-bottom: 1rem;
  }

  .event > .box {
    border-top: 1px solid #f1f1f1 !important;
    padding-top: 2rem !important;
  }

  .box {

    &:first-child {
      border-top: none;
      padding-top: 0;
    }
    border-top: 1px solid #f1f1f1;
    padding-top: 2rem;

    .type {
      display: inline-block;
      color: #999;
    }

    @media #{$small-only} {
      .type {
        display: none;
      }
    }

    .content-wrapper {
      line-height: 1.5rem;

      .created-at {
        color: #999;
        font-size: 90%;
        @media #{$medium-up} {
          float: right;
        }

        @media #{$small-only} {
          margin-left: 0.5rem;
        }
      }

    }

    .head, .foot {

      a {
        display: inline-block;
        margin: 0 0.5rem;
        &:first-child {
          margin-left: 0;
        }
      }

    }

    .head2 {
      font-size: 95%;
      color: #999;
    }

    .content {
      margin-top: 1rem;
      padding-bottom: 1rem;
      margin-bottom: 1rem;

      .title-wrapper {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .sub-title {
        color: #888;
      }
    }

    .foot {
      color: #666;
      padding-bottom: 1rem;
      .detail {
        margin-left: 0.5rem;
        font-size: 90%;
      }
    }

  }
}
